<template>
  <div class="ele-body">
    <el-card shadow="never">
      <!-- 搜索表单 -->
      <el-form
        :model="where"
        label-width="77px"
        class="ele-form-search"
        @keyup.enter.native="reload"
        @submit.native.prevent>
        <span>发送方邮箱:</span>&nbsp;
        <el-input
          clearable
          style="width: 200px"
          v-model="where.email"
          placeholder="请输入邮箱"/>
        &nbsp;&nbsp;
        <span>接收方邮箱:</span>&nbsp;
        <el-input
          clearable
          style="width: 200px"
          v-model="where.receive_email"
          placeholder="请输入邮箱"/>
        &nbsp;&nbsp;
        <span>订单号:</span>&nbsp;
        <el-input
          clearable
          style="width: 200px"
          v-model="where.order_id"
          placeholder="请输入订单"/>
        &nbsp;&nbsp;
        <span>sku:</span>&nbsp;
        <el-input
          clearable
          style="width: 200px"
          v-model="where.sku"
          placeholder="请选择sku,多个以;隔开"/>
        &nbsp;&nbsp;
        <span>状态:</span>&nbsp;
        <el-select class="form_width" style="width: 150px" filterable clearable v-model="where.status">
          <el-option v-for="(item,index) in sendLogList.status_list" :key="index" :label="item"
                     :value="index"/>
        </el-select>&nbsp;&nbsp;

        <br/>
        <br/>

        <span>买家来源:</span>&nbsp;
        <el-select class="form_width"  filterable clearable v-model="where.source">
          <el-option v-for="(item,index) in sendLogList.send_source_list" :key="index" :label="item"
                     :value="index"/>
        </el-select>&nbsp;&nbsp;

        <span>日志类型:</span>&nbsp;
        <el-select class="form_width" style="width: 140px" filterable clearable v-model="where.type">
          <el-option v-for="(item,index) in sendLogList.type_list" :key="index" :label="item"
                     :value="index"/>
        </el-select>&nbsp;&nbsp;
        <el-button
          type="primary"
          icon="el-icon-search"
          class="ele-btn-icon"
          @click="reload(1)">查询
        </el-button>
        <el-button @click="reset">重置</el-button>
        <br/><br/>

      </el-form>
      <!-- 数据表格 -->
      <ele-pro-table
        ref="table"
        :where="where"
        :datasource="url"
        :columns="columns"
        :selection.sync="selection"
        height="calc(100vh - 355px)">

        <!-- 表头工具栏 -->
        <template slot="toolbar">
          <el-button
            @click="exportData"
            type="primary"
            icon="el-icon-download"
            class="ele-btn-icon"
            size="small">导出
          </el-button>
        </template>

        <!-- 买家信息 -->
        <template slot="buyer_info" slot-scope="{row}">
          姓名: {{row.name}}
          <br/>
          订单号: {{row.order_id}}
          <br/>
          sku: {{row.sku}}
        </template>
        <!-- 邮件信息 -->
        <template slot="receive_email" slot-scope="{row}">
          发送方: {{row.email}}
          <br/>
          接收方: {{row.receive_email}}
        </template>

        <!-- 来源 -->
        <template slot="source" slot-scope="{row}">
          <el-tag type="success">{{row.source}}</el-tag>
        </template>
        <!-- 标题 -->
        <template slot="title" slot-scope="{row}">
          <span style="text-decoration: underline;cursor: pointer" title="查看详情"
                @click="openDetail(row)" >{{ row.title }}</span>
        </template>
        <!-- 状态 -->
        <template slot="status" slot-scope="{row}">
          <el-tag type="success">{{row.status}}</el-tag>
        </template>

        <template slot="time_log_node" slot-scope="{row}">
          发送成功时间: {{row.send_success_time}}
          <br/>
          最后打开时间: {{row.end_open_time}}
<!--          <br/>-->
<!--          最后点击链接时间: {{row.click_link_time}}-->
        </template>
      </ele-pro-table>
    </el-card>
      <send-log-detail
        v-if="showDetail"
        @close="showDetail=false"
        :data="current"
        :visible.sync="showDetail"
        ref="activateRef"
        @done="closeDetail"/>
    <!-- 编辑弹窗 -->
  </div>
</template>

<script>
import {mapGetters} from "vuex";
import SendLogDetail from "@/views/orderandcustomers/sendlog/sendlog-detail";
import XLSX from "xlsx";

export default {
  name: 'sendLog',
  components: {SendLogDetail},
  computed: {
    ...mapGetters(["permission"]),
  },
  data() {
    return {
      // 表格数据接口
      url: '/sendLog/index',
      // 表格列配置
      columns: [
        // {
        //   prop: 'id',
        //   label: 'ID',
        //   width: 60,
        //   align: 'center',
        //   showOverflowTooltip: true,
        //   fixed: "left"
        // },
        {
          prop: 'buyer_info',
          label: '买家信息',
          minWidth: 150,
          align: 'center',
          slot: 'buyer_info'
        },
        {
          prop: 'receive_email',
          label: '邮件信息',
          minWidth: 150,
          align: 'center',
          slot: 'receive_email'
        },
        {
          prop: 'source',
          label: '来源',
          minWidth: 130,
          align: 'center',
          slot: 'source'
        },
        {
          prop: 'title',
          label: '邮件标题',
          minWidth: 220,
          showOverflowTooltip: true,
          align: 'center',
          slot: 'title'
        },
        {
          prop: 'status',
          label: '状态',
          minWidth: 90,
          align: 'center',
          slot: 'status'
        },

        {
          prop: 'time_log_node',
          label: '时间记录节点',
          minWidth: 200,
          align: 'left',
          slot: 'time_log_node'
        },
        {
          prop: 'send_msg',
          label: '操作日志',
          minWidth: 140,
          showOverflowTooltip: true,
          align: 'center',
        },
        {
          prop: 'type_html',
          label: '日志类型',
          minWidth: 100,
          showOverflowTooltip: true,
          align: 'center',
        },
        {
          prop: 'create_time',
          label: '创建时间',
          sortable: 'custom',
          minWidth: 90,
          align: 'center',
          formatter: (row, column, cellValue) => {
            return this.$util.toDateString(cellValue);
          }
        },
        {
          prop: 'create_user_name',
          label: '创建用户',
          minWidth: 100,
          align: 'center',
        },
      ],
      // 表格搜索条件
      where: {
        page:0,
        limit:10,
      },
      // 表格选中数据
      selection: [],
      // 当前编辑数据
      current: null,
      // 是否显示编辑弹窗
      showEdit: false,
      showDetail: false,
      // 栏目列表
      cateList: [],
      //搜索条件配置项
      sendLogList:[],
    };
  },
  mounted() {
    this.getSendLogConfig();
  },
  methods: {
    /* 刷新表格 */
    reload(pageSign) {
      if (pageSign) this.where.page=1;
      this.$refs.table.reload({where: this.where});
    },
    /* 重置搜索 */
    reset() {
      this.where = {};
      this.reload();
    },
    closeDetail() {
      this.showDetail = false;
    },
    //查看详情
    openDetail(row) {
      this.current = row;
      this.showDetail = true;
    },
    /* 显示编辑 */
    openEdit(row) {
      this.current = row;
      this.showDetail = true;
    },
    /* 导出数据 */
    exportData() {

      var ass = this.where;
      ass.page=1;
      ass.limit=50000;

      let array = [['姓名','订单号','sku','发送方','接收方','来源','邮件标题','发送状态','发送成功时间','最后打开时间','操作日志','日志类型', '创建时间','创建用户']];
      const loading = this.$loading({lock: true});
      this.$http.get(this.url,{
        params:ass
      }).then(res => {
        loading.close();
        if (res.data.code === 0) {
          res.data.data.forEach(d => {
            array.push([
              d.name,
              d.order_id,
              d.sku,
              d.email,
              d.receive_email,
              d.source,
              d.title,
              d.status,
              d.send_success_time,
              d.end_open_time,
              d.send_msg,
              d.type_html,
              this.$util.toDateString(d.create_time),
              d.create_user_name,
            ]);
          });
          this.$util.exportSheet(XLSX, array, '发送日志');
        } else {
          this.$message.error(res.data.msg);
        }
      }).catch(e => {
        loading.close();
        this.$message.error(e.message);
      });
    },
    getSendLogConfig()
    {
      this.$http.get('/sendLog/getSendLogConfig').then(res => {
        if (res.data.code === 0) {
          this.sendLogList =res.data.data;
        } else {
          this.$message.error(res.data.msg);
        }
      }).catch(e => {
        this.$message.error(e.message);
      });
    },
  }
}
</script>

<style scoped>
</style>
